<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子名片</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .container{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid orange;
            background-color:rgb(11,63,110);
            text-align: center;
            color: white;
            border-radius: 10px;
        }
        .name{
            font-size: 60px;

        }
    </style>
</head>

<body>
    <div id="app">
       <business-card name="傅运龙" company="苏州上元教育" position="前端开发工程师" tel="18255497534" email="1455514325@qq.com"> </business-card>

    </div>
    
    <script>
        Vue.component("business-card",{
            props:{
                name:{
                    type:String,
                    require:true,
                },
                company:{
                    type:String,
                    require:true,
                },
                position:String,
                tel:{
                    type:String,
                    validator:function(value){
                        return value.search( /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g) !==-1 ;        
                    }
                },
                email:{
                    type:String,
                    validator:function(value){
                        return value.search( /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g) !==-1 ;        
                    }
                }
            },
            template:`
            <div class="container">
               
                <h2 class="name">{{name}}</h2>
                <h2 class="company">{{company}}</h2>
                <h2 class="position">职位:{{position}}</h2>
                <h2 class="tel">电话:{{tel}}</h2>
                <h2 class="email">邮箱:{{email}}</h2> 
            </div>
            `
        });

        var app =new Vue({
            el:"#app",
        })
      
    </script>
</body>

</html>